$(function () {
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var myChart;
        //执行一个laydate实例
        var startDate = laydate.render({
            elem: '#starttime'
            , value: new Date()
            , format: 'yyyy-MM-dd'
            , done: function (value, date) {
                endDate.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                };
                endDate.config.start = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                };
            }
        });
        var endDate = laydate.render({
            elem: '#endtime'
            , value: new Date()
            , format: 'yyyy-MM-dd'
            , done: function (value, date) {
                startDate.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                }
            }
        });


        //全选
        $("#area-all").click(function () {
            if (this.checked) {
                $(".area-eq :checkbox").prop("checked", true);
            } else {
                $(".area-eq :checkbox").prop("checked", false);
            }
        });

        //刷新
        $(".refreshBtn").click(function () {
            var chartDataObj = {};  //存放所选的条件
            var checkedWater = $(".area-eq input[name='inlineCheckBoxOptions']:checked");
            var chartType = $("form.chartpick input[type='radio']:checked").val();
            var waterMeters = [];
            $(checkedWater).each(function (i, v) {
                waterMeters.push(v.value);
            });

            chartDataObj.reportType = $("form.typepick input[type='radio']:checked").val(); //白班/夜班/日报/月报;
            chartDataObj.startTime = $("#starttime").val();
            chartDataObj.endtime = $("#endtime").val();
            chartDataObj.waterMeters = waterMeters.join(",");

            //发送请求，获取渲染图表的数据
            // $.ajax({
            // 	type: "GET",
            // 	url: "",
            // 	data: {},
            // 	dataType: "json",
            // 	success: function(data){
            //数据示例
            var data = {
                title: "xxx统计图",
                average: 150, //平均值
                type: chartType,
                xaxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                yaxis: [
                    {"水表1": [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]},
                    {"水表2": [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310]},
                    {"水表3": [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410]},
                ]
            };
            //渲染图表
            renderChart(data);
            // 	}
            // });

        });

        //保存为图片
        $(".downloadAsImg").click(function () {
            var mycanvas = $("#test").find("canvas")[0];
            if (mycanvas == undefined) {
                alert("尚未生成图表！");
            } else {
                var image = mycanvas.toDataURL("image/jpeg");
                var $a = document.createElement('a');
                $a.setAttribute("href", image);
                $a.setAttribute("download", "");
                $a.click();
            }
        });

        //打印
        $(".printBtn").click(function () {
            window.print();
        });

        //渲染图表
        function renderChart(data) {
            if (myChart != null && myChart != "" && myChart != undefined) { //判断是否已经存在myChart实例，有则销毁
                myChart.dispose();
            }
            myChart = echarts.init(document.getElementById('test')); //初始化myChart实例
            myChart.clear(); //清空当前实例
            var option = {
                title: {
                    text: data.title,
                    x: 'center'
                },
                backgroundColor: '#fff',
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                // legend: {  //图示
                // 	type: 'scroll',
                // 	orient: 'vertical',
                // 	right: 10,
                // 	top: 30,
                // 	bottom: 20,
                // 	data: [],
                // },
                xAxis: [
                    {
                        type: 'category',
                        data: data.xaxis,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    // {
                    // 	name: "水表名称",
                    // 	type: 'line',  // bar柱状图、line折线图
                    // 	stack: '总量',
                    // 	label: {
                    // 		normal: {
                    // 			show: true,
                    // 			position: 'inside'
                    // 		}
                    // 	},
                    // 	data: [120, 132, 101, 134, 90, 230, 210]
                    // }
                ]
            };

            $(data.yaxis).each(function (index, value) {
                for (var k in value) {
                    option.series.push({
                        name: k,
                        type: data.type,
                        // stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: value[k],
                        barWidth: data.xaxis.length <= 5 ? "20%" : "80%",
                        markLine: {  //标线
                            silent: true,
                            itemStyle: {
                                normal: {
                                    lineStyle: {type: 'solid', color: '#f00'},
                                    label: {show: true, position: 'end'}
                                }
                            },
                            data: [
                                {
                                    name: '平均值',
                                    yAxis: data.average
                                }
                            ]
                        }
                    });
                    // option.legend.data.push(k);
                }
            });


            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

            //其他筛选条件不变的情况下，切换图表类型
            $("form.chartpick input[type='radio']").change(function () {
                option.series.map(function (item) {
                    item.type = $("form.chartpick input[type='radio']:checked").val();
                });
                myChart.setOption(option);
            });
        }
    });
});